import styles from "./index.module.less";
import { useContext, useMemo } from "react";
import cName from "classnames";
import { RecommendationTypeMap } from "./store";
import { ChatContext } from "@/pages/BigScreen/context/store";
import {
  IRecommendationContent,
  Recommended,
} from "@/pages/BigScreen/context/type";
import { RefreshOutlined } from "@/components/Icons";
import { Col, Row } from "antd";

interface IRecommendationProblemProps {
  initMode?: boolean;
  recommended: Recommended;
}
function RecommendationProblem(props: IRecommendationProblemProps) {
  const { initMode = false, recommended } = props;
  const { handle, resetRecommend } = useContext(ChatContext);

  const { recommendationList, chatId } = useMemo(() => {
    return {
      chatId: recommended?.chatId ?? "",
      recommendationList: recommended?.content ?? [],
    };
  }, [recommended]);

  return (
    <div className={styles["recommendation-problem-wrapper"]}>
      {!initMode && (
        <div className={styles["tip-wrapper"]}>
          <div className={styles["tip"]}>你可以问我：</div>
          <div>
            <div
              className="ques-title-opera"
              onClick={() => {
                resetRecommend(chatId);
              }}
            >
              <RefreshOutlined></RefreshOutlined>
              <span>换一批</span>
            </div>
          </div>
        </div>
      )}
      <div className={styles["recommendation-problem-items"]}>
        <Row
          gutter={[8, 8]}
          style={{
            marginRight: 0,
          }}
        >
          {recommendationList.map((item: IRecommendationContent, index) => (
            <Col
              key={index}
              //  xs={24} md={12} lg={8}
              className={styles["recommendation-col"]}
            >
              <div
                className={cName(
                  styles["recommendation-problem-item"],
                  styles[RecommendationTypeMap[item.type]],
                  {
                    [styles["initMode"]]: initMode,
                  }
                )}
                onClick={() => {
                  handle(item.content, { parentMsgId: chatId });
                }}
              >
                <div className={styles["item-text"]}>{item.content}</div>
              </div>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}

export default RecommendationProblem;
